<template>
	<div>
		<v-container row class="text-subtitle-1 d-flex justify-center  align-left">
			<v-row class="mt-2">
				<!-- sm="6" md="2" -->
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="出货名称" v-model="detailQuery.name" dense outlined>
					</v-text-field>
				</v-col>
				<!-- 				<v-col cols="12" sm="3" md="2">
					<v-text-field label="项目号" v-model="detailQuery.projectcode" dense outlined>
					</v-text-field>
				</v-col> -->
				<v-col cols="12" sm="3" md="2">
					<v-text-field label="工单号" v-model="detailQuery.childrencode" dense outlined>
					</v-text-field>
				</v-col>
				<!-- ml-n16 前面加n是间距 -->
				<!-- class="ml-n16 mx-auto" -->
				<v-col cols="12" sm="2" md="2">
					<v-btn depressed color="primary" @click="loadPages">查询</v-btn>
					<v-btn class="ml-3" depressed color="primary" @click="refreshLoadPages">
						刷新</v-btn>
				</v-col>
			</v-row>
		</v-container>
		<br />
		<!-- :single-select="true" -->
		<v-data-table :headers="detailHeaderList" :items="detailDataList" small fixed-header item-key="id" dense
			class="text-no-wrap" loading-text="正在加载请稍等......" :options.sync="detailOptions"
			:footer-props="vuetifyDefaultPage" :loading="detailLoading" :server-items-length="detailTotalCount">
			<template v-slot:item.actions="{ item }">
				<div>
					<v-btn small tile color="primary" :disabled="item.checkresult" @click="openDeliveryCheckDialog(item)">
						出货检验
					</v-btn>
			<!-- 		<v-btn class="ml-2" small tile color="primary"  @click="openPrintDialog(item)">
						打印
					</v-btn> -->
				</div>
			</template>
			<template v-slot:item.checkresult="{ item }">
				<a v-if="item.checkresult" style="color: #67C23A;">检验完成</a>
				<a v-else>未完成</a>
			</template>
		</v-data-table>
		<deliverycheck :checkInfo="checkInfo"></deliverycheck>
	</div>
</template>

<script>
	import deliverycheck from '../components/product_delivery_oqc/product_delivery_check.vue'
	export default {
		name: 'mes_product_delivery_oqc',
		components: {
			deliverycheck
		},
		data: () => ({
			detailHeaderList: [{
					text: '操作',
					align: 'center',
					value: 'actions',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '是否检验完成',
					align: 'center',
					value: 'checkresult',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '工单号',
					align: 'center',
					value: 'childrencode',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '出货名称',
					align: 'center',
					value: 'name',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '产品规格及型号',
					align: 'center',
					value: 'model',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '出货数量',
					align: 'center',
					value: 'qty',
					filterable: false,
					class: 'fixed'
				},
				{
					text: '数量单位',
					align: 'center',
					value: 'unit',
					filterable: false,
					class: 'fixed'
				},
			],
			detailDataList: [],
			detailQuery: {
				name: '',
				childrencode: '',
			},

			detailOptions: { //页数
				page: 1,
				//每页行数
				itemsPerPage: 10
			},
			detailLoading: true,
			detailTotalCount: 0,
			vuetifyDefaultPage: {
				'items-per-page-text': '每页个数',
				'items-per-page-options': [10, 20, 50, 100]
			},
			detailModel: {},
			checkInfo: {
				prodeliverydetailid:0,
				childrenId: 0,
				checkDialog: false,
			},
		}),
		watch: {
			detailOptions: {
				handler() {
					this.loadPages()
				},
				deep: true
			},

		},
		methods: {
			async loadPages() {
				this.detailLoading = true
				var response = await this.$httpRequest({
					url: `MES/MESProductDeliveryCheck/LoadPages?
             	pageNum=${this.detailOptions.page}&
             	pageSize=${this.detailOptions.itemsPerPage}
             	`,
					method: 'get',
				})
				if (response.status == 1) {
					this.detailDataList = response.data.result
					this.detailTotalCount = response.data.pagination.totalRecords
					this.detailLoading = false
				}
			},
			refreshLoadPages() {
				this.detailQuery.name = ''
				this.detailQuery.childrencode = ''
				this.loadPages()
			},
			openDeliveryCheckDialog(item) {
				this.checkInfo.prodeliverydetailid=item.id
				this.checkInfo.childrenId = item.childrenid
				this.checkInfo.checkDialog = true
				this.loadPages()
			},
			openPrintDialog(item){
				
			},
		}

	}
</script>
